<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>openlayer</title>
    <!-- 加载弹窗样式 -->
    <link rel="stylesheet" type="text/css" href="css/OLPopup.css" >
    <script type='text/javascript' src='../../lib/jquery/3.6.0/jquery-3.6.0.min.js'></script>
    <!-- 4.6.5 -->
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/4.6.5/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/4.6.5/ol.js"></script>
    <!-- 5.3.3 -->
    <!--<link rel="stylesheet" type="text/css" href="../../lib/openLayers/5.3.3/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/5.3.3/ol.js"></script>-->
    <!-- 6.5.0-->
    <!--<link rel="stylesheet" type="text/css" href="../../lib/openLayers/6.5.0/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/6.5.0/ol.js"></script>-->
    <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>
    <style>
        .map {
            height: 800px;
            width: 100%;
        }
    </style>
</head>
<body>

    <div>
        <label>绘制几何图形类型：&nbsp;</label>
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">多边形</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
            <option value="Box">长方形</option>
        </select>
    </div>
    <div id="map" class="map"></div>
    <div id="mouse-position"></div>

    <script type="text/javascript">
        window.onload = function(){
            // 初始化地图，默认使用OSM地图
            const map = OpenLayersUtil.init("map");
            // 添加文字地图
            OpenLayersUtil.addLayer(OpenLayersUtil.layers.天地图文字标注)
            // 移除所有的图层
            // OpenLayersUtil.removeLayerAll();
            console.log("地图中心：",OpenLayersUtil.mercatorTolonlat(map.getView().getCenter()))
            // map.getView().Rotate().setRotation(20);// Rotate(20,OpenLayersUtil.mercatorTolonlat(map.getView().getCenter()));
            // 显示鼠标位置经纬度
            OpenLayersUtil.addMousePosition('mouse-position')
            OpenLayersUtil.addPointermove()
            OpenLayersUtil.popupOpen()
            // popupOpen(map)
            // 创建数据源
            var source = OpenLayersUtil.createSource();
            var layer = OpenLayersUtil.createLayer(source,'test');
            OpenLayersUtil.addLayer(layer);
            // 绘制文字，点，线，面，圆
            OpenLayersUtil.drawText(source,120, 36,'点');
            OpenLayersUtil.drawPoint(source,115, 36);
            OpenLayersUtil.drawLine(source,[
                [114.8, 29.8],
                [120.0, 30.0],
                [120.2, 29.8]
            ]);
            OpenLayersUtil.drawPolygon(source,[[
                [119.8, 29.8],
                [120.2, 29.8],
                [120.0, 30.0],
                [119.8, 29.8]
            ]]);
            OpenLayersUtil.drawRound(source,120.0, 30.0, 0.1);
            // 绘制圆线
            var lineStr = OpenLayersUtil.computeCirclularLine(112,25,100000,30,280)
            OpenLayersUtil.drawLine(source,OpenLayersUtil.polygonStringToLine(lineStr));
            // 绘制圆面
            var polygonStr = OpenLayersUtil.computeCirclularLine(116,28,100000,30,280)
            OpenLayersUtil.drawPolygon(source,OpenLayersUtil.polygonStringToPolygon(polygonStr)
                ,OpenLayersUtil.styles.circle);
            var polygonStr2 = OpenLayersUtil.computeCirclularLine(116,26,100000,30,280)
            OpenLayersUtil.drawPolygon(source,OpenLayersUtil.polygonStringToPolygon(polygonStr2,116,26)
                ,OpenLayersUtil.styles.circle);
            // 计算面积
            console.log("计算面积：",OpenLayersUtil.getAreaBySphere(
                new ol.geom.Polygon(OpenLayersUtil.polygonStringToPolygon(polygonStr))));
            // 聚合
            var lon = 112.0,lat = 28.0, count = 10000,date = [];
            for(var i = 0; i < count; i++){
                date.push([lon + Math.random(), lat + Math.random()]);
            }
            OpenLayersUtil.addCluster(date);
            // 图片
            OpenLayersUtil.addImage('images/20201207000001_PHI.png'
                ,[117.24194917241628, 23.91831310592743, 121.83916194758372, 28.064464674072568],0.9);
            // 绘制图形
            // 绘制类型选择对象
            var typeSelect = document.getElementById('type');
            // 用户更改绘制类型触发的事件
            typeSelect.onchange = function(e){
                // 移除绘制图形控件
                OpenLayersUtil.removeInteraction();
                // 添加绘制图形控件
                OpenLayersUtil.addInteraction(typeSelect.value);
            };

        }
    </script>

</body>
</html>